<template>
  <div>
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
      <!-- 下拉框学院查询 -->
      <el-select v-model="collegeId" placeholder="请选择学院" readonly>
        <el-option
          v-for="item in collegeAll"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <!-- 专业名称 -->
      <el-input
        v-model="name"
        @keyup.enter.native="loadPost"
        placeholder="请输入专业名称"
        suffix-icon="el-icon-search"
        style="width: 190px; margin-left: 5px"
      ></el-input>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="loadPost"
        >查询</el-button>
        <!-- 专业id -->
      <el-input
        v-model="id"
        @keyup.enter.native="loadPostID"
        placeholder="请输入专业id"
        suffix-icon="el-icon-search"
        style="width: 190px; margin-left: 5px"
      ></el-input>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="loadPostID"
        >Id查询</el-button>
        <!--      新增按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="add" >新增</el-button>
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
    </div>

    <!--    列表展示-->
    <el-table
      :data="majorData"
      :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
    >
      <el-table-column prop="collegeId" label="学院id" width="160"> </el-table-column>

      <el-table-column label="学院名称" width="160">
        <template slot-scope="scope">
          {{ getCollegeName(scope.row.collegeId) }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="专业id" width="160"> </el-table-column>
      <el-table-column label="专业名称" prop="name" width="160">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="创建时间"
        width="160"
      ></el-table-column>
      <el-table-column prop="gmtModified" label="更新时间" width="160">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="del(scope.row.id)"
            style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页  -->
    <div class="pagination-wrapper">
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增专业信息"
      :visible.sync="lenterDialogVisible"
      width="30%"
      center
      :before-close="handleClose">
      <!--      新增专业信息表单-->
      <el-form ref="MajorInfo" :rules="rules" :model="MajorInfo" label-width="80px">
        <el-form-item label="学院">
          <el-select v-model="MajorInfo.collegeId" placeholder="请选择学院" prop="collegeId">
            <el-option
              v-for="item in collegeAll"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称" prop="name">
          <el-col :span="15">
            <el-input v-model="MajorInfo.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-radio-group v-model="MajorInfo.sort">
            <el-input-number
              v-model="MajorInfo.sort"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lenterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改专业信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :before-close="handleClose">
      <!--      修改专业信息表单-->
      <el-form ref="MajorInfo" :rules="rules" :model="MajorInfo" label-width="80px">
        <el-form-item label="专业名称" prop="name">
          <el-col :span="15">
            <el-input v-model="MajorInfo.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-radio-group v-model="MajorInfo.sort">
            <el-input-number
              v-model="MajorInfo.sort"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doMod">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { del } from "@/api/major/Delete";
import { mod } from "@/api/major/Mod";
import { save } from "@/api/major/Save";
import { query } from "@/api/major/query";
import { collegeQueryAll } from "@/api/collegeManagement/queryAll";
import { queryId } from "@/api/major/queryId";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Major",
  data() {
    return {
      shouldLogRegistrationForms: true, // 控制是否执行日志记录
      collegeAll: [], // 存储学院区域选项数据
      majorData: [],
      page: 1,
      limit: 5,
      total: 0,
      name: "",
      num: 1,
      collegeId: "",
      id: "",
      centerDialogVisible: false,
      lenterDialogVisible: false,
      isPrivate: false,
      MajorInfo: {
        collegeId: "",
        id: "",
        name: "",
        sort: "",
      },
      rules: {
        name: [{ required: true, message: "请输入专业名称", trigger: "blur" }],
        collegeId: [ { required: true, message: '请选择学院', trigger: 'blur' }]
      },
    };
  },
  methods: {
    //将展示列表的学院id换成学院名称
    getCollegeName(collegeId) {
      const college = this.collegeAll.find((c) => c.id === collegeId);
      return college ? college.name : "未选择学院";
    },
   
    //重置表单
    resetForm() {
      this.$refs.MajorInfo.resetFields();
      this.num = 1;
    },

    //新增按钮
    add() {
      this.lenterDialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    //修改
    mod(row) {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        //赋值到表单
        this.MajorInfo.id = row.id;
        this.MajorInfo.collegeId = row.collegeId;
        this.MajorInfo.name = row.name;
        this.MajorInfo.sort = row.sort;
      });
    },
    //删除
    del(id) {
      del(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    //修改
    doMod() {
      mod({
        id:this.MajorInfo.id,
        name:this.MajorInfo.name,
        sort:this.MajorInfo.sort
      }).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
          this.resetForm();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    doSave(){
     save(this.MajorInfo.collegeId,this.MajorInfo).then(res=>{
        if (res.code === 20000){
          this.$message({
            message:'增加成功',
            type:'success'
          })
          this.lenterDialogVisible = false
          this.loadPost()
          this.resetForm()
        }else{
          this.$message({
            message:'增加失败',
            type:'error'
          })
        }
      })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.loadPost();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadPost();
    },
    resetParam() {
      this.name = "";
      this.collegeId = "";
      this.id = "";
      this.loadPost();
    },
    loadPost() {
      const params = {
        collegeId: this.collegeId,
        name: this.name
      };
      query(this.page, this.limit, params).then((res) => {
        if (res.code === 20000) {
          this.majorData = res.data.list.records;
          this.total = res.data.list.total;
        }
      });
    },
    loadPostID(){
        queryId(this.id).then((res) => {
            if (res.code === 20000) {
                const arrayStr = JSON.stringify([ res.data.major]);
                this.majorData = JSON.parse(arrayStr);  
                this.id = "";
            }

        })
    },
    collegeData() {
      collegeQueryAll()
        .then((res) => {
          this.collegeAll = res.data.collegeList.map((item) => ({
            id: item.id,
            name: item.name,
          }));
        })
        .catch((error) => {
          console.error("Error fetching region data:", error);
        });
    },
  },
  beforeMount() {
    this.loadPost();
    this.collegeData();
  },
};
</script>

<style scoped>
.pagination-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*background-color: #f5f5f5;*/
  padding: 10px 20px;
  /*box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  max-width: 800px; /* 设置最大宽度以避免在大屏幕上过分拉伸 */
  margin: 0 30%; /* 居中显示分页组件 */
}
</style>
